<html>
  <head>
    <!-- <meta http-equiv="refresh" content="1"> -->
    <title>Demonstration</title>
    <!-- <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <style>
      body {
		    background-image: url("/images/background.png");
		    /* background-image: url("background.png"); */
			background-repeat: no-repeat; 
			background-size: 100% 100%; 
			/* height: 100vh; */
      }
      #progress-container {
        margin-bottom: 20px;
        

      }
      #progress-bar {
        width: 800px;
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        border-radius: 10px;
      }
      #progress-name {
        font-weight: bold;
        margin-bottom: 5px;
      }
      #progress {
        width: 0%;
        height: 30px;
        background-color: #346dc9;
        border-radius: 10px;
        text-align: center;
        line-height: 30px;
        color: white;
      }
      .six-button-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        width: 100%;
        height: 100%;
      }
      .two-button {
        display: flex;
        flex-direction: row;
        margin: 2px;
      }
      #modelImg {
        height: 80px;
        width:80px;
        margin-right: 2px;
        transition: transform 0.3s ease;
      }
      #modelImg:hover {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
      }
      #modelImg:active{
        box-shadow:inset 0 3px 5px rgba(0,0,0,.125)
      }
    </style>
  </head>
  <body>
	  <div style="display: flex;justify-content:center; align-item:center;height: 100vh">
		<div style="display: flex;flex-direction:column !important;justify-content:center;align-item:center;height: 80vh;margin-top:80px;">
		 <div style="color:rgb(255, 255, 255);font-size:50px;text-align:center">
			基于RISC-V的3D高斯渲染器 
		  </div>
		  <img src="{{ url_for('video_feed') }}" style="width: 800px;height:800px;margin-top:10px;">
		  <!-- <img src="./static//images/background.png" style="width: 800px;height:800px;margin-top:10px;"> -->

      <div id="progress-container">
        <div id="progress-name">渲染进度:</div>
        <div id="progress-bar">
            <div id="progress">0</div>
        </div>
      </div>

		</div>
	  </div>
    <div style="position: absolute;bottom: 50px;right: 5px;height: 300px;width: 200px">
      <div class="six-button-content">
        <p style="text-align: left;">更换模型：</p>
        <div class="two-button">
          <img id="modelImg" src="/images/chair.png" alt="" onclick="changeModel('chair')">
          <img id="modelImg" src="/images/drum.png" alt="" onclick="changeModel('drums')">
        </div>
        <div class="two-button">
          <img id="modelImg" src="/images/hotdog.png" alt="" onclick="changeModel('hotdog')">
          <img id="modelImg" src="/images/lego.png" alt="" onclick="changeModel('lego')">
        </div>
        <div class="two-button">
          <!-- <img id="modelImg" src="/images/ship.png" alt="" onclick="changeModel('ship')"> -->
          <img id="modelImg" src="/images/mic.png" alt="" onclick="changeModel('mic')">
        </div>
        <button id="refresh" style="width:80px; border-radius: 5px;">重新渲染</button>
      </div>
    </div>
    <script>
        var eventSource = new EventSource("/progress");
        eventSource.onmessage = function(event) {
            var progress = parseInt(event.data);
            // console.log(progress)
            document.getElementById("progress").style.width = progress/200 * 800;
            document.getElementById("progress").innerHTML   = progress + "/200";
        };
        function changeModel(e){
            var dataToSend = {
                'key': e
            }
            $.ajax({
                type: "POST",
                url: "/changeModel",  // Flask的路由
                data: JSON.stringify(dataToSend),  // 发送的数据
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response){
                    // 请求成功后的处理
                    // $("#result").text(response.message);
                    console.log(response)
                }
            });
          } 

        $('#refresh').click(function() {
            $.ajax({
                type: 'POST',
                url: '/refresh',
                contentType: 'application/json',
                success: function(response) {
                    console.log(response)
                    document.getElementById("progress").innerHTML = 0 + "/180";
                }
            });
        });
    </script>
  </body>
</html>
